<template>
	<view class="content">
		<button @click="handleAllDelete">{{ishandleDelete ? '取消' : '管理'}}</button>
		<checkbox-group v-if="ishandleDelete" @change="handleAllCheck">
			<label>
				<checkbox value="true" :checked="isCheckAll" /><text>全选</text>
			</label>
		</checkbox-group>
		<button v-if="ishandleDelete" :disabled="isDisable" @click="handleDeleteSelect">批量删除</button>
		<view class="" v-for="item in addressList">
			<checkbox-group v-if="ishandleDelete" @change="handleItemCheck($event,item.id)">
				<checkbox value="true" :checked="item.checked" />
			</checkbox-group>
			<view>{{item.username}}</view>
			<view>{{item.tel}}</view>
			<view class="">{{item.addressInfo}}</view>
			<button @click="handleDelete(item.id)">删除</button>
			<button @click="handleEdit(item.id)">编辑</button>
		</view>
		<button @click="handleAddress">添加地址</button>
		<!-- 弹窗 -->
		<uni-popup ref="popup" background-color="#fff" type="bottom" :animation="true" :mask-click="false" >
			<text>是否同意以下内容</text>
			<view class="">同意获取同意获取同意获取同意获取同意获取同意获取</view>
			<button type="primary" @click="handleConfirm">同意</button>
			<button type="default" @click="handleNotConfirm">不同意</button>
		</uni-popup>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations,
		mapGetters
	} from 'vuex';
	export default {
		data() {
			return {
				ishandleDelete: false
			}
		},
		onLoad() {
			// this.$refs.popup.open()
			// console.log()
		},
		computed: {
			...mapState(['addressList']),
			...mapGetters(['isCheckAll', 'isDisable'])
		},
		methods: {
			...mapMutations(['deleteAddress', 'checkItem', 'checkAll', 'deleteSelect']),
			handleAddress() {
				uni.navigateTo({
					url: '/pages/newDetail/newDetail'
				})
			},
			handleDelete(id) {
				this.deleteAddress({
					id
				})
			},
			handleConfirm() {
				this.$refs.popup.close()
			},
			handleEdit(id) {
				uni.navigateTo({
					url: '/pages/newDetail/newDetail?id=' + id
				})
			},
			handleNotConfirm() {
				uni.exitMiniProgram()
			},
			handleAllDelete() {
				this.ishandleDelete = !this.ishandleDelete;
			},
			handleItemCheck(e, id) {
				const checked = !!e.detail.value.length;
				this.checkItem({
					id,
					checked
				})
			},
			handleAllCheck(e) {
				const checked = !!e.detail.value.length;
				this.checkAll({
					checked
				})
			},
			handleDeleteSelect() {
				this.deleteSelect()
				this.ishandleDelete = false
			}
		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
</style>